import React from 'react';
import ScrollableTabView from 'react-native-scrollable-tab-view';

import ApproveListPage from './ApproveListPage';

import MyTabBar from './MyTabBar';

import {
    View,
    Text,
    TouchableOpacity
} from 'react-native';

/**
 * 备份
 */
export default class ScrollableTabViewPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeIndex: 0
        }
    }

    /**
     * 渲染自定义顶部标题栏的右边组件
     * @param {*} activeIndex 
     * @param {*} overlayPullView 
     */
    _renderNavigationRightView(activeIndex, overlayPullView) {

        return (
            <TouchableOpacity onPress={() => {
                //跳转到筛选条件页面
                alert("点击了右边组件：activeIndex=" + activeIndex);
            }}>
                <Text>右边组件</Text>
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ backgroundColor: "#6a91f8" }} />
                <ScrollableTabView
                    initialPage={0}
                    tabBarBackgroundColor={"#6a91f8"}
                    tabBarActiveTextColor={"#7b7b7b"}
                    tabBarInactiveTextColor={"#fff"}
                    onChangeTab={(tab) => {
                        //alert("activeIndex:" + tab.i);
                        this.setState({ activeIndex: tab.i });
                    }}
                    renderTabBar={() => <MyTabBar renderNavigationRightView={() => {
                        return this._renderNavigationRightView(this.state.activeIndex, this.overlayPullView)
                    }}></MyTabBar>}>
                    <ApproveListPage tabLabel={"待审批"} type={0} />
                    <ApproveListPage tabLabel={"已审批"} type={1} />
                </ScrollableTabView>
            </View>
        );
    }
}